/** @jsxImportSource @emotion/react */
import { Form, Input, Select } from 'antd'
import { UserSelect } from 'components/UserSelect'
import React, { ChangeEvent, Fragment } from 'react'
import { Project, User } from 'types'



interface SearchPanelProps {
  users: User[],
  param: Partial<Pick<Project,'name'| 'personId'>>
  setParam: (param: SearchPanelProps["param"]) => void
}

export default function SearchPanel({ param, setParam, users }: SearchPanelProps) {

  return (
    <Fragment>
      <Form css={{margin:'2rem auto'}} layout={'inline'}>
        <Form.Item>
          {/* <Input type="text" value={param.name} onChange={evt => { setParam({ ...param, name: evt.target.value }) }} /> */}
          <Input 
            placeholder={'项目名'}
            type='text'
            value={param.name}
            onChange={(evt:ChangeEvent<HTMLInputElement>) =>  setParam({ ...param, name: evt.target.value })}
          />
        </Form.Item>
        <Form.Item>
          <UserSelect 
            defaultOptionName='负责人'
            value={param.personId} 
            onChange= {value => { setParam({ ...param, personId: value}) }}>
          </UserSelect>
          {/* <Select value={param.personId} onChange={value => { setParam({ ...param, personId: value}) }}>
            <Select.Option value="">负责人</Select.Option>
            {
              users.map(user => <Select.Option  key={user.id} value={String(user.id)}>{user.name}</Select.Option>)
            }
          </Select> */}
        </Form.Item>
      </Form>
    </Fragment>
  )
}
